<template>
    <div class="contentLayout">
        <div class="flex flexBetween navContent" v-if="isDetail&&detailInfo.approvalRecord.length>0">
            <div class="grayBtm" :class="{'fontbold fontSize16 colorBlue blueBtm':navType==1}" @click="goNav(1)">基本信息</div>
            <div class="grayBtm" :class="{'fontbold fontSize16 colorBlue blueBtm':navType==2}" @click="goNav(2)">处理流程</div>
        </div>
        
        <div v-show="navType==1">
            <!-- <div class="center fontbold fontSize16 colorBlue mt20 mb20">金点子建议书</div> -->
            <div class="whiteBg boxSty borderBtm">
                <div class="fontbold mb10"><span class="colorRed">*</span>主题</div>
                <!-- <textarea type="text" v-model="detailInfo.title" :disabled='isDetail' placeholder="请填写主题" class="textareaSty"></textarea> -->
                <textarea type="text" v-model="detailInfo.docSubject" v-show="!isDetail" placeholder="请填写关于xxx的建议" class="textareaSty"></textarea>
                <div v-show="isDetail" class="detailSty" v-html="detailInfo.docSubject"></div>
            </div>
            <div class="whiteBg boxSty borderBtm">
                <div class="fontbold mb10"><span class="colorRed">*</span>建议事由</div>
                <textarea type="text" v-model="detailInfo.reasonForSuggestion" v-show="!isDetail" placeholder="请填写建议事由" class="textareaSty" ></textarea>
                <div v-show="isDetail&&detailInfo.reasonForSuggestion" class="detailSty" v-html='detailInfo.reasonForSuggestion'></div>
            </div>
            <div class="whiteBg boxSty borderBtm">
                <div class="fontbold mb10">原有缺失</div>
                <textarea type="text" v-model="detailInfo.originalDeletion" v-show="!isDetail" placeholder="请填写原有缺失" class="textareaSty" ></textarea>
                <div v-show="isDetail&&detailInfo.originalDeletion" class="detailSty"  v-html='detailInfo.originalDeletion'></div>
            </div>
            <div class="whiteBg boxSty borderBtm">
                <div class="fontbold mb10">改进建议</div>
                <textarea type="text" v-model="detailInfo.suggestionsForImprovement" v-show="!isDetail" placeholder="请填写改进建议" class="textareaSty"></textarea>
                <div v-show="isDetail&&detailInfo.suggestionsForImprovement" class="detailSty" v-html='detailInfo.suggestionsForImprovement'></div>
            </div>
            <div class="whiteBg boxSty borderBtm">
                <div class="fontbold mb10">预期效果</div>
                <textarea type="text" v-model="detailInfo.expectedResult" v-show="!isDetail" placeholder="请填写预期效果" class="textareaSty" ></textarea>
                <div v-show="isDetail&&detailInfo.expectedResult" class="detailSty" v-html='detailInfo.expectedResult'></div>
            </div>
            <!-- <div class="whiteBg boxSty borderBtm">
                <div class="mb10 fontbold"><span class="colorRed">*</span>效果<span v-show="!isDetail">(可多选)</span></div>
                <van-checkbox-group checked-color='#4873c1' v-model="result" v-show="!isDetail">
                    <van-checkbox class="mb10" v-for='(item,index) in checkList' :key="index" :name="item.id">{{item.name}}</van-checkbox>
                </van-checkbox-group>
                <div v-show="isDetail" class="detailSty" v-html="detailInfo.effect_name"></div>
            </div> -->
            <div class="whiteBg boxSty borderBtm">
                <div class="mb10 fontbold"><span class="colorRed">*</span>效果<span v-show="!isDetail">(可多选)</span></div>
                <van-checkbox-group checked-color='#4873c1' v-model="result" :disabled='isDetail?true:false' :class="{'editBg':isDetail}">
                    <van-checkbox class="mb10" v-for='(item,index) in checkList' :key="index" :name="item.id">{{item.name}}</van-checkbox>
                </van-checkbox-group>
                <!-- <div v-show="isDetail" class="detailSty" v-html="detailInfo.effect_name"></div> -->
            </div>
            <div class="whiteBg boxSty borderBtm" v-show="!isDetail">
                <div class="mb10 fontbold"><span class="colorRed">*</span>审核人</div>
                <van-radio-group  checked-color='#4873c1' v-model="detailInfo.futureNodeId">
                    <van-radio class="mb10" v-for="(item,index) in reviewedList" :key="index" :name="item.id">{{item.name}}</van-radio>
                </van-radio-group>
            </div>
            <div class="whiteBg boxSty">
                <div class="mb10 fontbold">附件信息</div>
                <div class="wd100">
                    <div class="flex" v-show="isDetail">
                        <!-- <img v-for='(item,index) in detailInfo.docAttachment' @click="showImg(item)" :key="index" :src="item" class="shOwImg mb10"/> -->
                        <div v-for='(item,index) in detailInfo.docAttachment' :key='index'>
                            <!-- <img v-if="item.type==1" :src="item.url" @click="showImg(item.url)" class="shOwImg mb10" /> -->
                            <a :href="item" class="underlineSty fontSize12 colorBlue">附件</a>
                        </div>
                    </div>
                    <van-uploader v-model="fileList" accept='image/*' @delete='deleteImg' :after-read="changeUpload" max-count=4 v-show="!isDetail" multiple />
                </div>
            </div>
        </div>
        <div  v-show="navType==2">
            <!-- <div class="center fontbold fontSize16 colorBlue pt80 mb20" v-show="isDetail">审批状态</div> -->
            <div class="approvalRecord whiteBg" v-show="isDetail">
                <ul>
                    <li v-for="(item,index) in detailInfo.approvalRecord" :key="index" class="relative ">
                        <span class="colorfff fontSize12 disInline center">{{index + 1}}</span>
                        <div class="relative" style="bottom:0.2rem">
                            <p class="fontbold color999" :class="{'color333':index==detailInfo.approvalRecord.length-1}">{{item.nodeName}}</p>
                            <p v-html="item.nodeSuggestion" class="mt10"></p>
                            <p class="fontSize12 color999">{{item.nodeUser}}（{{item.nodeAction}}）</p>
                            <p class="fontSize12 color999">{{item.nodeTime}}</p>
                            <!-- <p>{{item.nodeAction}}</p> -->
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="fixedSty" v-show="!isDetail">
            <div class="blueBg colorfff saveBtn center" @click="goSave">提交</div>
        </div>
    </div>
</template>
<script>
import { Toast,ImagePreview,Dialog } from 'vant';
export default{
    name:'ideaDetail',
    data(){
        return{
            navType:1,//1基本信息  2处理流程
            fileList: [],
            result:[],
            checkList: [{id:'10',name:'有效节省或降低成本（实施后能直接节省成本，带来更高的经济价值，且能度量评估成果）'}, {id:'20',name:'有效提高工作效率（实施后对达成同等工作结果，能有效节省工作时间与人力成本；或在同等工作时间与人力成本投入下，能直接提升与扩大工作结果，且能度量评估成果）。'},{id:'30',name:'有效提升经营业绩（实施后能直接提升经营业绩，提升经营利润，且能度量评估成果）。'}],
            //{id:'40',name:'绿点子—有助于可持续时尚战略落地（实施后有利于提升可持续时尚观念影响力，有助于减少碳排放，有利于推动循环经济）。'}
            id:'',
            detailInfo:{
                docSubject:'',
                reasonForSuggestion:'',
                originalDeletion:'',
                suggestionsForImprovement:'',
                expectedResult:'',
                effect:[],
                docAttachment:'',
                futureNodeId:20,
                approvalRecord:[]
            },
            isDetail:false,
            uploadUrl:[],
            urlType:'',
            // reviewedList:[{id:20,name:'管理、经营改善方向（人力资源管理中心邓学军）'},{id:10,name:'生产技术改善方向（供应链管理中心欧伯炼）'}],
            reviewedList:[{id:20,name:'管理、经营改善方向（人力资源管理中心邓学军）'}],
            futureNodeId:''
        }
    },
    created(){
        // console.log('详情',this.$route)
        // this.urlType=this.$route.query.type//添加
        
        
    },
    mounted(){
        if(this.$route.query.id){
            this.id=this.$route.query.id
            this.isDetail=true
            this.getDetail()
        }
        this.scrollY()
    },
    methods:{
        scrollY(){
            window.scrollTo(0,0) || document.body.scrollTo(0,0)
        },
        goNav(type){
            this.navType=type
        },
        getDetail(){
            Toast.loading({
                message: '加载中',
                forbidClick: true,
            })
            // this.$apiRequest.getGoldideaDetail({id:this.id}).then(res=>{
            this.$apiRequest.getIdeaDetail({id:this.id}).then(res=>{
                console.log('获取详情',res)
                this.result=res.data.effect.split(',')
                // let newArr=[]
                // if(res.data.docAttachment.length>0){
                //     res.data.docAttachment.map(i=>{
                //         let obj={
                //             url:i
                //         }
                //         if(this.getFileType(i)){
                //             obj.type=1
                //         }else{
                //             obj.type=2
                //         }
                //         newArr.push(obj)
                //     })
                // }
                // res.data.docAttachment=newArr
                this.detailInfo=res.data
                // console.log('sssssssssssssssss',this.detailInfo)
                Toast.clear()
            })
        },
        goSave(){
            if(this.detailInfo.docSubject==''){
                Toast.fail('请填写主题');
                return
            }
            if(this.detailInfo.reasonForSuggestion==''){
                Toast.fail('请填写建议事由');
                return
            }
            if(this.result.length===0){
                Toast.fail('请勾选效果');
                return
            }
            if(this.detailInfo.futureNodeId=='' || !this.detailInfo.futureNodeId){
                Toast.fail('请选择审核人');
                return
            }
            console.log('this.urlType',this.urlType)
            //this.$router.replace({path:this.urlType})
            //this.$router.replace({path:'/myIdea',query:{type:'add'}})
            let that=this
            Dialog.confirm({
                title: '提示',
                message: '确定提交以上内容吗?',
            })
            .then(() => {
                // on confirm
                that.addGoldIdea()
            })
            .catch(() => {
                // on cancel
            });
            
        },
        addGoldIdea(){
            let that=this
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
                overlay:true
            });
            this.detailInfo.effect=this.result.join(',')
            console.log('提交data',this.detailInfo) //goSaveIdea
            // this.$apiRequest.addGoldIdea({...this.detailInfo}).then(res=>{
            this.$apiRequest.goSaveIdea({...this.detailInfo}).then(res=>{
                console.log('提交结果',res)
                if(res.code==1){//1是正常的
                    Toast.success('提交成功')
                    setTimeout(function(){
                        that.$router.replace({path:'/myIdea',query:{type:'add'}})
                        //that.$router.replace({path:that.urlType})
                    },2000)
                }else{
                    Toast.fail(res.msg);
                }
                Toast.clear();
            })
        },
        changeUpload(file){
            console.log('传什么东西',file)
            // file.message='上传中'
            // file.status='uploading'
            let formData=new FormData()
            // formData.append('file',file.file)
            // console.log('formData',formData)

            if(Array.isArray(file)){//判断是否是数组
                file.map(element => {
                    element.status = 'uploading';
                    element.message = '上传中';
                    formData.append("file", element.file);
                    this.$apiRequest.onUpload(formData).then(res=>{
                        // console.log('上传状态1',res)
                        if(res.code==1){//成功
                            element.message='上传成功'
                            element.status=''
                            this.uploadUrl.push(res.data.url)
                            let imgUrls=this.uploadUrl.join(',')
                            this.detailInfo.docAttachment=imgUrls
                            console.log('要传的imgUrls1',imgUrls)
                        }else{
                            element.status='failed'
                            element.message='上传失败'
                        }
                    })
                });
            }else{
                file.status = 'uploading';
                file.message = '上传中';
                formData.append("file", file.file);
                this.$apiRequest.onUpload(formData).then(res=>{
                    // console.log('上传状态',res)
                    if(res.code==1){//成功
                        file.message='上传成功'
                        file.status=''
                        this.uploadUrl.push(res.data.url)
                        let imgUrls=this.uploadUrl.join(',')
                        this.detailInfo.docAttachment=imgUrls
                    }else{
                        file.status='failed'
                        file.message='上传失败'
                    }
                })
            }


            
        },
        deleteImg(img,e){
            this.uploadUrl.splice(e.index,1)
            let docAttachmentArr=this.detailInfo.docAttachment.split(',')
            docAttachmentArr.splice(e.index,1)
            this.detailInfo.docAttachment=docAttachmentArr.join(',')
        },
        showImg(img){
            ImagePreview([img])
        },
        // getFileType(filename){
        //     var reg= /^.+(\.doc|\.docx)$/;
        //     if(!reg.test(filename)){
        //         console.log('不是word')
        //         return false;
        //     }else{
        //          console.log('一定是是word')
        //     }
        // }
    }
}
</script>
<style lang='less'>
.contentLayout{
    .van-checkbox__label--disabled{
        color: #777;
    }
    .van-checkbox__icon--disabled.van-checkbox__icon--checked .van-icon{
        color: #777;
    }
}
</style>
<style lang="less" scoped>
@import '@/assets/css/style';
.wrapper{
    background-color:rgba(72, 115, 193, 0.1);
}
.navContent{
    width: 50%;
    margin: 0.4rem auto;
    .grayBtm{border-bottom: 1px #ddd solid;}
    .blueBtm{border-bottom: 1px #4873c1 solid;}
}
.pt80{padding-top: 0.8rem;}
.textareaSty{
    //border:0.01rem #ddd solid;
    border: 0;
    border-radius: 0.1rem;
    -webkit-appearance:none;
    -webkit-user-selece:auto;
    width: 100%;
}
textarea::-webkit-input-placeholder{
    color: #ccc;
    font-size: 0.26rem;
}
.detailSty{
    background-color: #f9f9f9;
    padding: 0.1rem;
    border-radius: 0.1rem;
    color: #777;
}
.shOwImg{
    width: 1rem;
    height: 1.2rem;
    margin-right: 0.1rem;
}
.boxSty{
    padding: 0.2rem;
}
.borderBtm{border-bottom: 0.01rem #eee solid;}
.contentLayout{
    // padding-bottom: 2rem;
    padding: 0.2rem 0.2rem 2rem 0.2rem
}
.blueBg{background-color: #4873c1 !important;}
.fixedSty{
    position: fixed;
    width: 95%;
    bottom: 0.6rem;
    max-width: 768px;
}
.saveBtn{
    width: 80%;
    margin: 0 auto;
    padding: 0.15rem 2%;
    border-radius: 0.4rem;
}
.editBg{
    background-color: #f9f9f9;
    padding: 0.1rem;
    border-radius: 0.1rem;
}
.approvalRecord{
    // background-color: #242a2d;
    padding: 0.6rem 8%;
    ul {
        // margin-top: 1.6rem;
        // border-left: 1px #ddd solid;
        li{
            padding-left: 0.44rem;
            padding-bottom: 0.6rem;
            border-left: 1px #ddd solid;
        }
        .blueBorder{border-left: 1px #4873c1 solid;}
        span{
            background-color: #ddd;
            position: absolute;
            left: -0.22rem;
            top: -0.22rem;
            width: 0.4rem;
            height: 0.4rem;
            line-height: 0.4rem;
            border-radius: 50%;
        }
        li:last-child{
            // border-left: 1px #4873c1 solid;
            span{
                background-color: #666;
            }
        }
    }
}
.underlineSty{
    text-decoration:underline;
    margin-right: 0.4rem;
}
</style>
